<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命流程中的_挂载流程</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 :style="{opacity}">Vue的生命周期</h1>
    挂载流程:<img src="Vue生命周期中的_挂载流程.png" alt="图片丢失了,请联系管理员处理">
    <hr>
    更新流程:<img src="Vue生命流程中的_更新流程.png" alt="图片丢失了,请联系管理员处理">
    <hr>
    销毁流程:<img src="Vue生命周期中的_销毁流程.png" alt="图片丢失了,请联系管理员处理">
</div>
</body>

<!--
    常用的生命周期钩子:
        1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
        2.beforeDestroy:停止定时器、取消订阅消息、解绑自定义事件、释放内存等【收尾工作】。
    关于销毁Vue实例
        1.销毁后借助Vue开发者工具看不到任何信息。
        2.销毁后自定义事件会失效，但是原生DOM事件依然有效。
        3.一般不会在beforeDestroy钩子中操作数据，因为即便操作数据，也不会在触发更新流程了。
-->
<script>

    new Vue({
        el: '#app',
        data: {
            opacity: 1,
            n:100,
            timer:null
        },
        mounted() {
            console.log("mounted")
            setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) {
                    this.opacity = 1;
                }
                this.n--;
                if (this.n === 0) {
                    clearInterval(this.timer);
                    console.log("定时器已清理");
                    this.$destroy();
                }
            }, 16)
        },
        beforeDestroy() {
            console.log("beforeDestroy")
            clearInterval(this.timer);
        },
        destroyed() {
            console.log("destroyed")
            console.log(this)
        }

    });
</script>
</html>